<template>
    <view class="master-income-record" v-if="isLoad">
        <!-- <back></back> -->
        <view
            class="list-item ml-lg mr-lg pt-lg pb-lg"
            :class="[{ 'b-1px-t': index != 0 }]"
            v-for="(item, index) in list.data"
            :key="index"
        >
            <view class="flex-between">
                <view class="f-mini-title c-title text-bold">
                    {{
                        item.type == 9
                            ? `直推${$t("action.attendantName")} ${item.coach_name} 完成服务`
                            : `粉丝 ${item.nickName} 下单完成服务`
                    }}
                </view>
                <view class="f-md-title">+{{ item.cash }} </view>
            </view>
            <view class="flex-between">
                <view class="f-caption c-caption">{{ item.create_time }}</view>
                <view class="f-caption" :style="{ color: item.type == 9 ? primaryColor : subColor }"
                    >返佣{{ item.balance }}%</view
                >
            </view>
        </view>
        <load-more
            :noMore="list.current_page >= list.last_page && list.data.length > 0"
            :loading="loading"
            v-if="loading"
        >
        </load-more>
        <abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"></abnor>

        <view class="space-footer"></view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    components: {},
    data() {
        return {
            isLoad: false,
            param: {
                page: 1,
                status: 2,
            },
            list: {
                data: [],
            },
            loading: true,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
    }),
    async onLoad() {
        this.$util.showLoading();
        await this.initIndex();
        this.isLoad = true;
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading) return;
        this.param.page = this.param.page + 1;
        this.loading = true;
        this.getList();
    },
    methods: {
        ...mapMutations([]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            await this.getList();
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
        },
        initRefresh() {
            this.param.page = 1;
            this.initIndex(true);
        },
        async getList() {
            let { list: oldList, param } = this;
            let newList = await this.$api.mine.commList(param);

            if (this.param.page == 1) {
                this.list = newList;
            } else {
                newList.data = oldList.data.concat(newList.data);
                this.list = newList;
            }
            this.loading = false;
            this.$util.hideAll();
        },
        handerTabChange(index) {
            this.activeIndex = index;

            this.$util.showLoading();
            this.param.page = 1;
            this.getList();
        },
        toCopy(index) {
            let { order_code: url } = this.list.data[index];
            this.$util.goUrl({
                url,
                openType: "copy",
            });
        },
    },
};
</script>

<style lang="scss">
page {
    background: #fff;
}

.master-income-record {
    .mine-menu-list {
        .money-info {
            font-size: 50rpx;

            .money {
                font-size: 70rpx;
            }
        }
    }

    .list-item {
        .item-tag {
            width: 24rpx;
            height: 24rpx;
        }
    }
}
</style>
